<script setup>
	import {reactive, ref} from "vue";
	import {Lock, Cellphone, User, Message, HomeFilled} from "@element-plus/icons-vue";
	import axios from "axios";
	import router from "@/router/index.js";
	import { checkRegister } from "@/util/api";
	// 表单引用对象
	const formDataRef = ref()

	// 表单数据
	const formData = reactive({
		userName:'',
		phoneNumber:'',
		userPassword:'',
		confirm:'',
		gender:'0',
		birthDate:'',
		email:'',
		address:''
	})

	// 自定义姓名校验规则
	const validateName = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^[\u4e00-\u9fa5]{2,4}$/
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("姓名最少为2个汉字"))
		}
	}

	// 自定义手机号码校验规则
	const validateCellphone = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^1[0-9]{10}$/
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("请输入正确的手机号码"))
		}
	}

	// 自定义密码校验规则
	const validatePassword = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^[A-Za-z0-9]{6,20}$/
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("登录密码可由6~20个大写字母、小写字母或数字组成"))
		}
	}

	// 自定义确认密码校验规则
	const validateConfirm = (rule, value, callback) => {

		// 判断是否一致
		if (formData.confirm == formData.userPassword) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("两次密码输入不一致"))
		}
	}

	// 自定义联系地址校验规则
	const validateAddress = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^[\u4e00-\u9fa5]{2,}$/;
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("联系地址最少为2个汉字"))
		}
	}


	// 表单校验
	const formDataRules = reactive({
		userName:[
			{ required: true, message: '请填写姓名', trigger: 'blur' },
			{validator: validateName, trigger: "blur"}
		],
		phoneNumber:[
			{ required: true, message: '请填写手机号码', trigger: 'blur' },
			{validator: validateCellphone, trigger: "blur"}
		],
		userPassword:[
			{ required: true, message: '请填写登录密码', trigger: 'blur' },
			{validator: validatePassword, trigger: "blur"}
		],
		confirm:[
			{ required: true, message: '请填写确认密码', trigger: 'blur' },
			{validator: validateConfirm, trigger: "blur"}
		],
		gender:[
			{ required: true, message: '请选择性别', trigger: 'blur' }
		],
		address:[
			{ required: true, message: '请填写联系地址', trigger: 'blur' },
			{validator: validateAddress, trigger: "blur"}
		],


	})

	// 登录
	const registerUser = () => {
		// 需要对用户的表单数据进行再次校验
		formDataRef.value.validate((valid) => {
			// 判断是否校验通过
			if (valid) {
				const data = {...formData}
				delete data.confirm			
			    checkRegister(formData).then(res => {
					// 判断是否注册成功
					console.log(res);
					
					if (res.success === true) {		
						router.push("/login");
					}else {
						console.log(res.data.message);
						router.push("/register");
					}

				})
			}
		})
	}

	// 跳转登录
	const login = () => {
		router.push("/login");
	}
</script>

<template>
	<div id="app">
		<div id="app">
			<div class="login-container">
				<div class="login-title">
					<div>
						<span>个人通讯录管理系统</span>
					</div>
					<div>
						<span>【 用户注册 】</span>
					</div>
				</div>
				<div class="login-form">
					<el-form ref="formDataRef" :model="formData" :rules="formDataRules">
						<el-form-item prop="userName">
							<el-input type="text"
							          v-model="formData.userName"
							          size="large"
							          :prefix-icon="User"
							          placeholder="请输入姓名"/>
						</el-form-item>
						<el-form-item prop="phoneNumber">
							<el-input type="text"
							          v-model="formData.phoneNumber"
							          size="large"
							          :prefix-icon="Cellphone"
							          placeholder="请输入手机号码"/>
						</el-form-item>
						<el-form-item prop="userPassword">
							<el-input type="password"
							          v-model="formData.userPassword"
							          size="large"
							          :prefix-icon="Lock"
							          placeholder="请输入密码"/>
						</el-form-item>
						<el-form-item prop="userPassword">
							<el-input type="password"
							          v-model="formData.confirm"
							          size="large"
							          :prefix-icon="Lock"
							          placeholder="确认密码"/>
						</el-form-item>
						<el-form-item prop="gender">
							<el-icon><Male /></el-icon><el-icon><Female /></el-icon>
							<el-text>性别：</el-text>
							<el-radio-group v-model="formData.gender">
								<el-radio value="0" size="large">男</el-radio>
								<el-radio value="1" size="large">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item prop="birthDate">
							<el-icon><Calendar /></el-icon>
							<el-text>出生日期：</el-text>
							<el-date-picker
									v-model="formData.birthDate"
									type="date"
									placeholder="选择一个日期"
							/>
						</el-form-item>
						<el-form-item prop="email">
							<el-input type="text"
							          v-model="formData.email"
							          size="large"
							          :prefix-icon="Message"
							          placeholder="请输入电子邮件"/>
						</el-form-item>
						<el-form-item prop="address">
							<el-input type="text"
							          v-model="formData.address"
							          size="large"
							          :prefix-icon="HomeFilled"
							          placeholder="请输入联系地址"/>
						</el-form-item>
						<el-form-item>
							<el-button
									type="primary"
									size="large"
									icon="SwitchButton"
									style="width: 100%"
									@click="registerUser">
								注册
							</el-button>
							<el-link type="success" @click="login">已经有账号？去登录</el-link>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.login-container {
		box-sizing: border-box;
		width: 660px;
		height: auto;
		padding: 30px;
		border: 2px solid deepskyblue;
		border-radius: 20px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.login-title {
		box-sizing: border-box;
		width: 100%;
		height: 120px;
		background: deepskyblue;
		color: white;
	}
	.login-title div:nth-child(1) {
		width: 100%;
		height: 80px;
		font: normal bold 30px 微软雅黑;
		text-align: center;
		line-height: 80px;
	}
	.login-title div:nth-child(2) {
		width: 100%;
		height: 40px;
		font: normal bold 18px 微软雅黑;
		text-align: center;
	}
	.login-form {
		margin-top: 20px;
	}
</style>